 import React, {useEffect, useState} from 'react'
import './index.scss'
import edit from './images/edit.png'
import tiezi from './images/tiezi.png'
import {useHistory} from 'react-router-dom'
import axios from 'axios'
import {loading} from '../../components/loading'
import {message} from '../../components/message'

export default function Mine() {
  const [info, setInfo] = useState({})
  const [dynamicLength, setDynamicLength] = useState(0)
  useEffect(()=>{
    axios.get('/user/getUserInfo').then(res=>{
      console.log(res.data.data)
      // 注意：返回的是数组
      setInfo({ ...res.data.data[0] })
    })
    getMyDynamic()
  },[])
  const history = useHistory()
    const getMyDynamic = () => {
      let load = loading()
      axios
        .get(`/dynamic/getDynamicList?isme=${true}`)
        .then((res) => {
          console.log(res.data.data)
          setDynamicLength(res.data?.data?.length)
          load.close()
        })
        .catch((err) => {
          message('加载失败啦~')
          load.close()
        })
    }
  return (
    <div className="mine">
      <div className="personal">
        <div className="personal-info">
          <img src={info && info.avatar} alt="加载失败>_<"></img>
          <div className="">
            <div>昵称:{info && info.username}</div>
            <div>年龄:{info && info.age}</div>
            <div>地区:{info && info.area}</div>
            <div>个性签名:{info && info.signature}</div>
            <div className="mine-edit">
              编辑个人资料
              <img
                src={edit}
                alt=">_<"
                onClick={() => {
                  history.push('/edit')
                }}
              />
            </div>
            <div className="mine-tiezi">
              我的帖子:{dynamicLength}
              <div
                className="mine-tiezi-todetail"
                onClick={() => {
                  history.push('/mine/my-dynamic')
                }}
              >
                {`查看详情`}
                <img src={tiezi} alt=">_<" />
                {`>`}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
